<!--shift+Alt +上下键 移动代码 -->
<template>
   <h1>文本指令</h1>
<!-- 插值指令：将页面的文本与响应式变量的值进行绑定
      如果修改变量的值，页面显示的文本也会随之改变-->
  <h4>{{ info }}</h4>
  <span>{{ info+"中午好" }}</span>
  <button @click="f">点我</button>
  <hr>
<!--  该写法与{{}} 相同-->
  <p v-text="aaa"></p>
  <p>{{ aaa }}</p>
  <p v-html="aaa"></p>
</template>
<script setup>
import { ref } from 'vue';

//1. 定义响应式变量
const info=ref('hello world');
//2. 定义箭头函数，修改响应式变量的值
const f=()=>{
  console.log(info);
  info.value="你好";
  console.log(info);
}
// v-text v-html 指令
// 1. v-text：将文本内容替换为指定内容 简写{{xxx}}
// 2. v-html：将文本内容替换为指定内容，且识别标签
const aaa=ref("我是<mark>aaa</mark>")

</script>


<style scoped>

</style>